﻿import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './confirmorder.scss'
export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
      zftype:0,
      paypwd:[],
      paypwdlen:0,
      tuitable:[{number:'1',tuibg:false,innerhtml:false,click:'1'},
                {number:'2',tuibg:false,innerhtml:false,click:'1'},
                {number:'3',tuibg:false,innerhtml:false,click:'1'},
                {number:'4',tuibg:false,innerhtml:false,click:'1'},
                {number:'5',tuibg:false,innerhtml:false,click:'1'},
                {number:'6',tuibg:false,innerhtml:false,click:'1'},
                {number:'7',tuibg:false,innerhtml:false,click:'1'},
                {number:'8',tuibg:false,innerhtml:false,click:'1'},
                {number:'9',tuibg:false,innerhtml:false,click:'1'},
                {number:'-',tuibg:true,innerhtml:false,click:'3'},
                {number:'0',tuibg:false,innerhtml:false,click:'1'},
                {number:'',tuibg:true,innerhtml:true,click:'2'}
              ],
      bmtetlist:[{touimg:'https://minichat.g2ma.com/kedouimg/icon26.png',touname:'推荐微信用户使用',toutype:'微信支付',toucheck:true,id:'1'},
                 {touimg:'https://minichat.g2ma.com/kedouimg/icon28.png',touname:'使用我的余额支付',toutype:'余额支付',toucheck:false,id:'2'},
                ],
      paytypes:1
    }
  }
  config = {
    navigationBarTitleText: '订单信息'
  }
  componentWillMount () {
    let _this = this
    let aar = _this.$router.preload.aar
    _this.setState({
      arr: aar
    })
  }
  componentDidShow () {
  }
  componentWillUnmount () {
  }
  getcode(){
    var _this = this
    var paytypes = _this.state.paytypes
    if (paytypes == 1) {
      Taro.login({
        success(res) {
          // console.log(JSON.stringify(res)+'aa1111')
          if (res.code) {
            _this.orderSubmit(res.code)
          } else {
            Taro.showToast({
              title:'网络异常',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    } else if (paytypes == 2) {
      _this.orderSubmit('')
    }
  }
  orderSubmit(code){
    var _this = this
    var paytypes = _this.state.paytypes
    if (paytypes == 1) {
      _this.pay(code)
    } else if (paytypes == 2) {
      _this.setState({
        zftype:1,
        paypwd:[],
        paypwdlen:0
      })
    }
  }
  pay(code){
    var _this=this
    var paytypes = _this.state.paytypes
    var arr = _this.state.arr
    var orderId = arr[0].id
    var payAmount = arr[0].totalAmount
    if (paytypes == 1) {
      var date = {
        amounts:payAmount,
        orderIds:orderId,
        payTypeId:125,
        code: code
      }
    } else if (paytypes == 2) {
      var payPasswords = _this.state.paypwd
      var payPassword = payPasswords.join('')
      var date = {
        payPassword:payPassword,
        orderIds:orderId,
        payTypeId:10,
        amounts:payAmount
      }
    }
    // console.log(JSON.stringify(date)+'//3333333333')
    Taro.showLoading({title: '支付中',mask: true})
    CommonJs.ajaxRequest('/order/payOrders',date,'GET',function(ret){
        // console.log(JSON.stringify(ret)+'//444444')
        if (paytypes == 1) {
          Taro.requestPayment({
            timeStamp: ret.content.outret.timeStamp,
            nonceStr: ret.content.outret.nonceStr,
            package: ret.content.outret.packageValue,
            signType: ret.content.outret.signType,
            paySign: ret.content.outret.paySign,
            success(res) {
              _this.gettozuan(orderId, payAmount)
            },
            fail() {
              Taro.showToast({
                title:'支付失败',
                icon: 'none',
                duration: 2000
              })
            }
          })
        } else if (paytypes == 2) {
          // console.log(JSON.stringify(ret)+'1111')
          if (ret) {
            if (ret.code != 300) {
              Taro.hideLoading()
              Taro.showToast({
                title:'支付成功',
                icon: 'success',
                duration: 1500,
                mask: true
              })
              setTimeout(() => {
                let pages = Taro.getCurrentPages()
                let lastPage = pages[pages.length - 2]
                // console.log(lastPage.data)
                lastPage.setData({
                  updateType: true
                })
                Taro.navigateBack({ delta: 1 })
              }, 1500)
            } else {
              Taro.hideLoading()
              Taro.showModal({
                title: '支付结果',
                content: ret.msg,
                showCancel: false,
                confirmText: '确定',
                success:function(res){
                  // console.log(JSON.stringify(res)
                  if (res.confirm) {
                    _this.setState({
                      paypwd:[],
                      paypwdlen:0
                    })
                  }
                }
              })
            }
          }
        }
    },'noloading','noret','hideLoad')
  }
  gettozuan(orderId, payAmount){
    let _this = this
    let date = {
      amounts:payAmount,
      orderIds:orderId
    }
    CommonJs.ajaxRequest('/order/payThePostProcessing',date,'GET',function(ret){
      // console.log(JSON.stringify(ret)+'//444444')
      let pages = Taro.getCurrentPages()
      let lastPage = pages[pages.length - 2]
      // console.log(lastPage.data)
      lastPage.setData({
        updateType: true
      })
      Taro.navigateBack({ delta: 1 })
    })
  }
  payment(event){
    var _this = this
    // console.log(JSON.stringify(event))
    var checked = event.currentTarget.dataset.type
    var bmtetlist = _this.state.bmtetlist//获取Json数组
    for (var i = 0; i < bmtetlist.length;i++){
      if (bmtetlist[i].id == checked){
        bmtetlist[i].toucheck = true;//当前点击的位置为true即选中
      }
      else{
        bmtetlist[i].toucheck = false;//其他的位置为false
      }
    }
    _this.setState({
      bmtetlist:bmtetlist,
      paytypes:checked
    })
  }
  closepay(){
    var _this = this
    _this.setState({
      zftype:0
    })
  }
  inputNum(type,event){
    var _this = this
    // console.log(JSON.stringify(event))
    // console.log(type)
    var paypwd = _this.state.paypwd
    if (type == 1) {
      var paypwdlen = paypwd.length
      if (paypwdlen < 6) {
        var num = event.target.dataset.number
        paypwd.push(num)
        var paypwdlen = paypwd.length
        _this.setState({
          paypwd:paypwd,
          paypwdlen:paypwdlen
        },function(){
          if (paypwdlen == 6) {
            _this.pay('')
          }
        }) 
      }
    } else if (type == 2) {
      paypwd.pop()
      var paypwdlen = paypwd.length
      _this.setState({
        paypwd:paypwd,
        paypwdlen:paypwdlen
      })
    }
    // console.log(JSON.stringify(_this.state.paypwd))
  }
  buzhichi(){
    Taro.showModal({
      title: '提示',
      content: '抱歉，小程序不允许你访问网页链接，如需获得最全功能和更好体验请下载“蝌蚪社区”APP!',
      showCancel: false
    })
  }
  render () {
    //<View className='qun-liuyan'>
    //  <Input className='' cursorSpacing='10px' maxLength='250' type='text' placeholder='给商家的备注(选填)'/>
    //</View>
    const arr = this.state.arr
    const bmtetlist = this.state.bmtetlist
    const tuitable = this.state.tuitable
    const paypwdlen = this.state.paypwdlen
    return (
      <View className='page'>
        <View className='qun-zffixed' style={this.state.zftype==1?'display:block':'display:none'}>
          <View className='qun-zfbotn'>
            <View className='section'>
              <View className='qun-zftite'>
                <Image className='qun-zfclose' onClick={this.closepay.bind(this)} src='https://minichat.g2ma.com/kedouimg/close1.png'></Image>
                <Text>请输入支付密码</Text>
                <Text></Text>
              </View>
              <View className='qun-zfmima'>
                <View className='qun-zfkuan'>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 1 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 2 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 3 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 4 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 5 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 6 ? '●' : ''} type='text' disabled='true'/>
                </View>
              </View>
              <View className='qun-zfwanji'><Text onClick={this.buzhichi.bind(this)}>忘记密码?</Text></View>
              <View className='tui-table-view'>
                {tuitable.map((item, index) => (
                <View className={item.tuibg ? 'tui-col-3 tui-bg' : 'tui-col-3'} dataNumber={item.number} onClick={this.inputNum.bind(this,item.click)}>
                  {item.innerhtml ?
                    <Image className='qun-zfdel' src='https://minichat.g2ma.com/kedouimg/del.png'></Image>
                    :
                    item.number
                  }
                </View>
                ))}
              </View>
            </View>
          </View>
        </View>
        <View className='qun-bgbanner'>

          <View className='qun-sohofs'>
            <View className='qun-pkzhifu'>收货方式</View>
            <View className='qun-bmgue'>
              <View classNme='qun-zifans'>
                <View className='qun-zifuli'>
                  <View className='qun-fasi'>
                    <Image mode="scaleToFill" className='qun-wlglimg' src='https://minichat.g2ma.com/kedouimg/wlgl.png'></Image>
                    <View className='qun-wexm'>
                      <Text>物流配送</Text>
                    </View>
                  </View>
                  <Image mode="scaleToFill" className='qun-bmbgtus' src='https://minichat.g2ma.com/kedouimg/checkc.png'></Image>
                </View>
              </View>
            </View>
          </View>

          <View className='qun-shouhodl'>
            <View className='qun-diliwzs'>
              <Image mode="scaleToFill" className='qun-diliwzsimg' src='https://minichat.g2ma.com/kedouimg/dingwei.png'></Image>
            </View>
            <View className='qun-dilisonr'>
              <View className='qun-dizhzojn'>
                <Text decode='true'>姓名:&nbsp;&nbsp;{arr[0].address.name}</Text>
                <Text>{arr[0].address.mobile == null ? arr[0].address.phone : arr[0].address.mobile}</Text>
              </View>
              <View className='qun-shohudizhi'>
                <Text decode='true'>收货地址:&nbsp;&nbsp;{arr[0].address.regionName}{arr[0].address.address}</Text>
              </View>
            </View>
            <View className='qun-dilixuze'>
              <Image mode="scaleToFill" className='qun-dilixuzeimg' src='https://minichat.g2ma.com/kedouimg/goselect.png'></Image>
            </View>
          </View>

          <View className='qun-sohofs'>
            <View className='qun-pkzhifu'>支付方式</View>
            {bmtetlist.map((item, index) => (
            <View className='qun-bmgue' onClick={this.payment.bind(this)} dataType={item.id}>
              <View classNme='qun-zifans'>
                <View className='qun-zifuli'>
                  <View className='qun-fasi'>
                    <Image mode="scaleToFill" className='qun-fsimg' src={item.touimg}></Image>
                    <View className='qun-wexm'>
                      <Text>{item.toutype}</Text>
                    </View>
                  </View>
                  <Image mode="scaleToFill" className='qun-bmbgtu' src={item.toucheck ?'https://minichat.g2ma.com/kedouimg/icon24.png' : 'https://minichat.g2ma.com/kedouimg/icon23.png'}></Image>
                </View>
              </View>
            </View>
            ))}
          </View>
          <View className='qun-hegs'></View>
          {arr.map((item, index) => (
            <View className='qun-sujuzon'>
              <View className='qun-sujus'>
                <View className='qun-tobuig'>
                  <Image mode="widthFix" className='qun-mendnimg' src='https://minichat.g2ma.com/kedouimg/store.png'></Image>
                  <Text className='qun-mendnce'>{item.shopName}</Text>
                </View>
              </View>
              <View className='qun-zongsju'>
                <View className='qun-gmtup'>
                  <Image mode="widthFix" className='qun-gmtupimg' src={item.itemShopCommodityReq[0].shopCommodity.logo}></Image>
                </View>
                <View className='qun-gminfo'>
                  <View className='qun-gmbtit'>{item.itemShopCommodityReq[0].commodityName}</View>
                  <View className='qun-gmguge'>
                    <View className='qun-dspy'>规格: {item.itemShopCommodityReq[0].goodsName}</View>
                    <View className='qun-dspy qun-ynfus' style='display:none;'>运费: <Text className='coloryufu'>11111</Text></View>
                  </View>
                </View>
                <View className='qun-gmprice'>
                  <View className='qun-pricesy'>￥{item.itemShopCommodityReq[0].price}</View>
                  <View className='qun-sulan qun-gmguge'>x{item.itemShopCommodityReq[0].amount}</View>
                </View>
              </View>
            </View>
          ))}
          <View className='qun-gmbom'>
            <View className='qun-gmyfje'>
              应付金额: ￥
              <Text className='qun-gmcol'>{arr[0].totalAmount}</Text>
            </View>
            <View className='qun-gmtjdd' onClick={this.getcode.bind(this)}>立即支付</View>
          </View>
        </View>
      </View>
    )
  }
}

 